<%-- 
    Document   : insert_pelaporan
    Created on : Dec 18, 2013, 4:06:56 PM
    Author     : brlnt
--%>

<%@include file="../template/header.jsp"%>
<%@page import="java.util.List"%>
<%@page import="model.PelaporanBean"%>
<script src="${initParam.js}/parsley.js"></script>
<script src="${initParam.js}/parsley.extend.js"></script>

<%
    PelaporanBean dataPelaporan = (PelaporanBean) request.getAttribute("dataPelaporan");
    String action = (String) request.getAttribute("buttonName");
    UserBean  sesiUser = (UserBean) session.getAttribute("sesiUser");
%>
<!-- map -->
<script>
    jQuery(function($) {
        // Asynchronously Load the map API 
        var script = document.createElement('script');
        script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
    });

    function initialize() {
        var map;
        var bounds = new google.maps.LatLngBounds();

        var styles = [
            {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [
                    {"color": "#6a5acd"},
                    {"visibility": "on"},
                    {"weight": 2.1}
                ]
            }, {
                "featureType": "road",
                "elementType": "geometry",
                "stylers": [
                    {"visibility": "simplified"}
                ]
            }
        ];

        // Create a new StyledMapType object, passing it the array of styles,
        // as well as the name to be displayed on the map type control.
        var styledMap = new google.maps.StyledMapType(styles, {name: "SIPERANAS"});

        var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(<% 
                if(!action.equals("Tambah")){ 
                    out.print(dataPelaporan.getLokasisungai());
                } else{%>-7.27972, 112.737526<%}%>),
            mapTypeControlOptions: {
                scrollwheel: false,
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        };

        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        map.setTilt(45);

        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
        
        <% if(!action.equals("Tambah")){ %>
            // Multiple Markers
            var markers = [['<%=dataPelaporan.getNamasungai()%>', <%=dataPelaporan.getLokasisungai()%>]];
            console.log("yes");
            // Info Window Content
            var infoWindowContent = [['<div class="info_content">'+
            '<h3><%=dataPelaporan.getNamasungai()%></h3>'+
            '<p><%=dataPelaporan.getDeskripsi()%></p>'+
            '<a href="#" class="btn btn-primary">View Details</a>'+
            '</div>']];
        
        // Loop through our array of markers & place each one on the map  
        for (i = 0; i < markers.length; i++) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            // Allow each marker to have an info window    
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));
        }
        <% } %>
    
        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow(), marker, i;
        
        google.maps.event.addListener(map, 'click', function(event) {
            //call function to create marker
            $("#coordinate").val(event.latLng.lat() + ", " + event.latLng.lng());
            $("#coordinate").select();

            //delete the old marker
            if (marker) {
                marker.setMap(null);
            }

            //add marker onclick
            marker = new google.maps.Marker({position: event.latLng, map: map});

        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- end of map -->
<div class="row">
    <div class="col-lg-6 col-lg-push-1">
        <h3>${title}</h3>
        <hr>
        <fieldset>
            <% if(request.getAttribute("title").equals("Validasi Pelaporan")) { %>
            <script>
                function doValidasi(){
                    $.ajax({
                            type: 'POST',
                            url: './validasi',
                            data: "id="+<%=dataPelaporan.getIdPelaporan()%>,
                            success: function() {
                                    window.location.href = "./pelaporan?action=validasi";
                            }
                    });
                }
                function tolakValidasi(){
                    $.ajax({
                            type: 'POST',
                            url: './tolakvalidasi',
                            data: "id="+<%=dataPelaporan.getIdPelaporan()%>,
                            success: function() {
                                    window.location.href = "./pelaporan?action=validasi";
                            }
                    });
                }
                
                $(document).ready(function(){
                    $('#form').find('input, textarea, button, select').attr('disabled', true);
                });
            </script>
            <div id="validForm" class="text-center">
                <a href="#" class="btn btn-primary" onclick="doValidasi()" />Validasi Pelaporan</a>
                <a href="#" class="btn btn-danger" onclick="tolakValidasi()"/>Tolak Pelaporan</a>
            </div>
            <% } %>
            <% String actAddress = (String) request.getAttribute("actAddress"); %>
            <form action="<%=actAddress%>" method="POST" id="form" enctype="multipart/form-data" parsley-validate novalidate>
                <label>Nama Sungai *</label>
                <input type="text" class="form-control" name="nama" value="<% if(action.equals("Edit")){ out.print(dataPelaporan.getNamasungai()); }%>" parsley-required="true" parsley-maxlength="30">
                <label>Lokasi Sungai *</label>
                <div class="location-selector form-control" id="map-canvas"></div>
                <input type="text" class="form-control" name="lokasi" id="coordinate" value="<% if(action.equals("Edit")){ out.print(dataPelaporan.getLokasisungai()); }%>" readonly parsley-required="true">
                <label>Foto Sungai</label>
                <input type="file" class="form-control" name="foto">
                <label>Deskripsi *</label>
                <textarea name="deskripsi" rows="10" class="form-control" parsley-required="true"><% if(action.equals("Edit")){ out.print(dataPelaporan.getDeskripsi()); }%></textarea>
                <label>Warna Sungai *</label>
                <select name="warna" id="warna" class="form-control">
                    <option value="1" <% if(action.equals("Edit") && dataPelaporan.getWarnasungai() == 1){out.print("selected");} %>>Jernih</option>
                    <option value="2" <% if(action.equals("Edit") && dataPelaporan.getWarnasungai() == 2){out.print("selected");} %>>Jernih Kecoklatan</option>
                    <option value="3" <% if(action.equals("Edit") && dataPelaporan.getWarnasungai() == 3){out.print("selected");} %>>Pekat Kecoklatan</option>
                    <option value="4" <% if(action.equals("Edit") && dataPelaporan.getWarnasungai() == 4){out.print("selected");} %>>Pekat Kehitaman</option>
                    <option value="5" <% if(action.equals("Edit") && dataPelaporan.getWarnasungai() == 5){out.print("selected");} %>>Sangat Pekat Kehitaman</option>
                </select>
                <label>Bau Sungai *</label>
                <select name="bau" id="bau" class="form-control">
                    <option value="1" <% if(action.equals("Edit") && dataPelaporan.getBausungai() == 1){out.print("selected");} %>>Tidak Berbau</option>
                    <option value="2" <% if(action.equals("Edit") && dataPelaporan.getBausungai() == 2){out.print("selected");} %>>Sedikit Berbau</option>
                    <option value="3" <% if(action.equals("Edit") && dataPelaporan.getBausungai() == 3){out.print("selected");} %>>Sedikit Menyengat</option>
                    <option value="4" <% if(action.equals("Edit") && dataPelaporan.getBausungai() == 4){out.print("selected");} %>>Menyengat</option>
                    <option value="5" <% if(action.equals("Edit") && dataPelaporan.getBausungai() == 5){out.print("selected");} %>>Menyengat Sekali</option>
                </select>
                <label>Adanya Sampah</label>
                <select name="sampah" id="sampah" class="form-control">
                    <option value="1" <% if(action.equals("Edit") && dataPelaporan.getAdanyasampah() == 1){out.print("selected");} %>>Tidak Ada Sampah</option>
                    <option value="2" <% if(action.equals("Edit") && dataPelaporan.getAdanyasampah() == 2){out.print("selected");} %>>Ada Sedikit Sampah</option>
                    <option value="3" <% if(action.equals("Edit") && dataPelaporan.getAdanyasampah() == 3){out.print("selected");} %>>Ada Cukup Banyak Sampah</option>
                    <option value="4" <% if(action.equals("Edit") && dataPelaporan.getAdanyasampah() == 4){out.print("selected");} %>>Ada Banyak Sampah</option>
                    <option value="5" <% if(action.equals("Edit") && dataPelaporan.getAdanyasampah() == 5){out.print("selected");} %>>Ada Banyak Sekali Sampah</option>
                </select>
                <label>Suhu Sungai</label>
                <div class="input-group">
                    <input type="text" class="form-control" name="suhu" value="<% if(action.equals("Edit")){ out.print(dataPelaporan.getSuhusungai()); }%>" parsley-type="number">
                    <span class="input-group-addon">&deg;C</span>
                </div>
                <label>PH Sungai</label>
                <input type="text" class="form-control" name="ph" value="<% if(action.equals("Edit")){ out.print(dataPelaporan.getPhsungai()); }%>" parsley-type="number">
                <input type="hidden" name="id" value="<% if(action.equals("Edit")){out.print(dataPelaporan.getIdPelaporan());}%>">
                <label>&nbsp;</label>
                <input type="submit" class="btn btn-primary form-control" value="<%=action%>">
            </form>
        </fieldset>
    </div>
</div>
                <!-- input type="button" value="Disable Elements" onclick="return disableElements()" / -->
<%@include file="../template/footer.jsp"%>